<template>
	<!-- 排三首页  liudan -->
	<div class="container">
		<wxc-minibar   :useDefaultReturn="false" @wxcMinibarLeftButtonClicked="onClickLeftc" >
			<!-- <image slot="left" src="http://zhongcai-test.oss-cn-beijing.aliyuncs.com/back_icon.png"  style="height:28px;width:16px;"></image> -->
			
				<div class="header-con" slot="middle" @click="navFn">
					<text class="header-title">{{ title || '直选'}}</text>
					<div class="history-list-title-num-arrow">
						<image ref="isTopShow" class="history-header-arrow" v-if="!isTopShow" src="http://zhongcai-test.oss-cn-beijing.aliyuncs.com/hch5/in-down.png" alt="arrow-down"></image>
						<image ref="isTopShow" class="history-header-arrow" v-else src="http://zhongcai-test.oss-cn-beijing.aliyuncs.com/hch5/in-up.png" alt="arrow-down"></image>
					</div>
				</div>
			
			<div class="header-right" slot="right" @click='goparticulars'>
               <image style="width:40px;height:40px;" src="https://goucai-app.oss-cn-beijing.aliyuncs.com/home/show-play.png"></image>
           </div>
		</wxc-minibar>
		<scroller class="scroller" style="position: fixed;top:90px;bottom: 100px;left: 0px;right: 0px;">
			<div class="navdown">
				<div class="history">
					<div class="history-price-time-g" v-if="currentSell === ''">
						<text>{{historyMsg}}</text>
					</div>
					<div class="history-price-time-g" v-if="currentSell !== ''">
						<div class="history-price-time-fat">
							<text class="history-price-time">{{ currentSell.issue }}期开奖时间 {{currentSell.drawTime | filtertime}}</text>
							<text class="history-price-time history-price-time-2">截止投注还有</text>
						</div>
						<wxc-countdown :interval="1000" tpl="{h}:{m}:{s}" :timeBoxStyle="{backgroundColor: '#fff', height: '30px', width: '30px'}" :timeTextStyle="{fontSize: '24px', color: '#E4242E'}" :dotTextStyle="{color: '#E4242E', fontSize: '26px'}" :dotBoxStyle="{width: '20px'}"
						:style="{justifyContent: 'center'}" :time="currentSell.sellEndTime">
						</wxc-countdown>
					</div>
					<!-- 历史记录 -->
					<div class="history-list" v-if="history.length > 0">
						<div class="history-list-title">
							<div class="history-list-title-num-arr" style="margin-left:-2px">
								<text class="history-list-title-f">{{history[0].issue}}期 开奖</text>
								<div class="history-list-items-balls" style="padding-left:4px;">
									<text class="history-list-title-num-arr-h-one" v-for="(item,index) in history[0].drawNumber.split(',')" :key="index+1/3">{{item}}</text>
								</div>
							</div>
							<div class="history-arrow" @click="historyshow">
								<image  class="history-list-title-num-arrow-img" :style="{'opacity': !historyShow ? 1 : 0 }" src="http://zhongcai-test.oss-cn-beijing.aliyuncs.com/hch5/arrdown1.2.png" alt="arrow-down"></image>
								<image  class="history-arrow-red"  :style="{'opacity': !!historyShow ? 1 : 0 }"  src="http://zhongcai-test.oss-cn-beijing.aliyuncs.com/hch5/arrowupred.png" alt="arrow-down"></image>
							</div>
						</div>
						<div class="history-list-items" v-if="historyShow">
							<div class="history-list-items-item" :style="{ 'background-color': index%2 == 0 ? '#ebebeb' : '#d8d8d8' } " v-for="(item,index) in historyList" :key="index">
								<text class="history-list-item-date">{{item.issue}}期</text>
								<div class="history-list-items-balls">
									<text class="history-list-title-num-arr-h-one" v-for="(items,indexs) in item.drawNumber.split(',')" :key="indexs+1/3">{{items}}</text>
								</div>
							</div>
						</div>
					</div>
					<!-- 历史记录 -->
					<!-- 切换选彩格式Start -->
						<direct-select v-if="modelName == 'directSelect'" ref="directSelect" @setTotal="getTotal"></direct-select>
						<pai-six v-if="modelName == 'paiSix'" ref="paiSix" @setTotal="getTotal"></pai-six>
						<reexamine v-if="modelName == 'reexamine'" ref="reexamine" @setTotal="getTotal"></reexamine>
						<simplex v-if="modelName == 'simplex'" ref="simplex" @setTotal="getTotal"></simplex>
					<!-- 切换选彩格式end -->
				</div>
			</div>
		</scroller>

		
		<!-- 提交 -->
		<div class="chose-down" style="position: fixed;bottom: 0px;left: 0px;right: 0px;">
			<div class="chose-down-mechose" @click="wxcButtonClicked()">
				<image class="chose-down-mechose-img" src="http://zhongcai-test.oss-cn-beijing.aliyuncs.com/hch5/mechose.png"></image>
				<text class="chose-down-mechose-name">机选注数</text>
			</div>
			<div class="chose-down-submit">
				<div class="chose-down-money-g" v-if="JSON.stringify(total) != '{}'">
					<text class="chose-down-money" style="color:#333">已选</text>
					<text class="chose-down-money" style="color:#ff0000">{{ total.number }}</text>
					<text class="chose-down-money" style="color:#333">注</text>
					<text class="chose-down-money" style="color:#ff0000">{{ total.money }}</text>
					<text class="chose-down-money" style="color:#333">元</text>
				</div>

				<div class="chose-down-money-g" v-else>
					<text class="chose-down-money" style="color:#333">摇一摇，机选一注</text>
				</div>
				<div class="pay-btn" :style="{'background-color':JSON.stringify(total) != '{}' ? '#E70D0D' : '#999'}" v-if="JSON.stringify(total) != '{}'" @click="nextOrder">
					<text class="pay-btn-color">选好了 </text>
				</div>
				<div class="pay-btn" :style="{'background-color':JSON.stringify(total) != '{}' ? '#E70D0D' : '#999'}" v-if="JSON.stringify(total) == '{}'">
					<text class="pay-btn-color">选好了</text>
				</div>
			</div>
		</div>


		<!-- 提交 -->
		<wxc-popup popup-color="#fff"
			:show="isTopShow"
			@wxcPopupOverlayClicked="isTopShowFn"
			pos="top"
			ref="wxcPopup"
			standOut="90px"
			height="255">
			<div class="isSelectOpt">
				<div class="select-type">
					<div
						class="popup-btn" 
						v-for="(item,index) in btnTitle"
						@click="goactivitylist(item, index)"
						:key="index"
						:class="[ index !== zindex ? 'btn-basis-color' : 'btn-basis-color-active'] "
					>
						<text class="popup-btn-color" :style="{ 'color': index !== zindex ? '#333' : '#E70D0D' }">{{ item.title }}</text>
					</div>
				</div>
			</div>
     	</wxc-popup>


		<!-- 机选注数 弹层 -->
		<wxc-popup popup-color="#F5F5F5"
			:show="isBottomShow"
			@wxcPopupOverlayClicked="isBottomCloseFn"
			pos="bottom"
			ref="wxcPopupBottom"
			height="400">
				<div class="popup-title"><text class="popup-title-c">机选注数</text></div>
				<div class="popup-select-type">
					<div class="popup-btn-j btn-basis-color" v-for="(item,index) in btns" 
					:key="index" 
					@click="popoverButtonClicked(item)"
					:class="[ item.key !== randomNumber ? 'btn-basis-color' : 'btn-basis-color-active'] ">
						<text class="popup-btn-color" :style="{ 'color': item.key !== randomNumber ? '#333' : '#E70D0D' }">{{ item.text }}</text>
						<image  src="http://zhongcai-test.oss-cn-beijing.aliyuncs.com/hch5/sanjijao.png" class="sanjiao" v-if="item.key === randomNumber"></image>
					</div>
				</div>
				<div class="wxc-pop-list">
					<div class="wxc-pop-btn" @click="isClose"><text class="pop-btn-title">取消</text></div>
					<div class="wxc-pop-btn pop-cancle" @click="randomNextOrder"><text class="pop-btn-confirm" style="color:#fff">确定</text></div>
				</div>
		</wxc-popup>
</div>
</template>

<script>

import { WxcPopup, WxcPopover, WxcCountdown, Utils } from "weex-ui";
import WxcMinibar from "@/components/modules/wxc-minibar/index.js"
import { getBaseUrl, serialize, jsonAnalysis }  from "@/utils/index.js"
import { GetResponsesToken } from "@/api.js";

import directSelect from "./paiThreeModel/direct-select.vue"
import paiSix from "./paiThreeModel/paiSix.vue"
import reexamine from "./paiThreeModel/reexamine.vue"
import simplex from "./paiThreeModel/simplex.vue"
const navigator = weex.requireModule('navigator')
const storage = weex.requireModule("storage")
const modal = weex.requireModule("modal")
const sxglobalEvent = weex.requireModule("globalEvent");

export default {
	props:['type'],
	components: {
		WxcMinibar,
		WxcPopover,
		WxcPopup,
		directSelect,
		paiSix,
		reexamine,
		simplex,
		WxcCountdown
	},
	data() {
		return {
			isBottomShow:false,
			isActive: true,
			zindex:0,
			randomNumber:1,
			currentSell:'', //当前奖期
			canBuy:true,
			history: [],
			historyMsg:'',
			modelName:'directSelect',
			title:'', //头部title
			total:{}, //金额和注数
			btnTitle:[{'title': '直选','name':'directSelect'}, {'title':'组三(单式)', 'name': 'simplex'}, {'title':'组三(复式)', 'name': 'reexamine'}, { 'title': '组六', 'name': 'paiSix'}],
			betContent:[],
			historyShow:false,
			isTopShow:false,
			lotteryLimit:'',
			baseURL:'',
			btns: [
				{
					text: "机选1注",
					key: 1
				},
				{
					text: "机选5注",
					key: 5
				},
				{
					text: "机选10注",
					key: 10
				}
			],
		}
	},

	computed:{
		// 记录未显示的历史记录
		historyList() {
			return this.history.splice( 1, this.history.length-1 )
		}
	},

	filters: {
       filtertime(time) {
            let date = new Date(+time)
            let iarr = ['周日','周一','周二','周三','周四','周五','周六']
            let formatNum = (num) => { return num < 10 ? "0" + num : num.toString() }

            return `${formatNum(date.getMonth() + 1)}-${ formatNum(date.getDate())} ${iarr[date.getDay()]} ${date.getHours()}:${date.getMinutes()}`
        }
	},
	
	methods:{
        goparticulars(){
			let baseUrl = getBaseUrl(weex.config.bundleUrl, true);
			var param = {
					name:this.type == 'welfareLottery' ? '福彩3D' : '排列三'
				 }
			navigator.push({
				'url':baseUrl + 'views/all-explain/paiGameShow.js?'+ serialize(param), 
				'animated': 'true'
			})
		},   
		onClickLeftc() {
			return new Promise((resolve, reject) => {
				modal.confirm({
					message: "退出将清空所选投注号码",
					okTitle: "确定",
					cancelTitle: "取消",
					duration: 0.3
				},(value)=> value === "确定" && navigator.pop() )
			});
		},
		
		// 导航更换
		navFn() {
			this.isTopShow = !this.isTopShow
		},
		// 历史记录操作
		historyshow() {
			this.historyShow = !this.historyShow
		},

		//切换排三玩法
		goactivitylist(type, index){
			// 标题显示
			this.title = type.title
			// 模块名称
			this.modelName = type.name
			this.$refs.wxcPopup.hide();
			// 标记索引
			this.zindex = index

			// 清空选择
			this.total = {}
			this.betContent = []
		},
		// 顶部选彩切换
		isTopShowFn() {
			this.isTopShow = false
		},

		// 底部随机
		isBottomCloseFn() {
			this.isBottomShow = false
			
		},
		// 关闭随机底部弹窗
		isClose() {
			this.$refs.wxcPopupBottom.hide();
		},

 		// 获取选取金额和注数, 投注内容
		getTotal(value, arr) {
			this.total = value
			this.betContent = arr
		},
		
		wxcButtonClicked() {
			this.isBottomShow = true
		},

		//弹出随机注数选项
		popoverButtonClicked(obj) {
			this.randomNumber = obj.key
		},

		// 随机进入订单页
		randomNextOrder() {
			this.$refs.wxcPopupBottom.hide();
			this.linkRouter(this.$refs[this.modelName].randowParam(this.randomNumber) )
		},
		
		nextOrder() {
			let param = !!Array.isArray( this.total ) ? this.total : Array.of(this.total)
			this.linkRouter( param )
		},

		// 手机摇一摇或者点击摇一注
		shakephone() {
			sxglobalEvent.addEventListener("shakephone", e => {
				weex.requireModule("eventShakeModule").shakeWithType("city"); //震动
				this.$refs[this.modelName].shake()
				// this.$nextTick(()=>{
				// 	this.$refs[this.modelName].shake()
				// })
			})
		},
		
		//跳转订单
		linkRouter(param) {
			let baseurl = getBaseUrl(weex.config.bundleUrl, true)
			let idata = {
				lotteryId : this.type == 'welfareLottery' ? 3 : 4,
				issueIssue   : this.currentSell.issue,
				issueId : this.currentSell.id,
				lotteryLimit:JSON.stringify(this.lotteryLimit)
			}
			

			if( this.historyMsg === '暂无期次') {
				modal.toast({message:'暂无销售'})
				return false
			}

			this.cacheMark(param).then((v) => {
				navigator.push({
					url:baseurl + `views/confirm/paiThreeOrder.js?`+ serialize(idata),
					animated: "true"
				})
			})
		},


		//缓存数据
		cacheMark(value) {
			return new Promise((resolve, rejects) => {
				this.getCacheMark().then((v)=>{
					
					let data = !v ? value : JSON.parse(v).concat(value)
					
					storage.setItem("paiThreeList", JSON.stringify(data), event => {
						if (event.result === "success") {
							resolve(true);
						} else {
							modal.confirm({message:'缓存数据失败'})
						}
					})
				})
			})
		},

		// 获取缓存数据
		getCacheMark() {
			return new Promise((resolve, rejects) => {
				storage.getItem("paiThreeList", event => {
					if (event.result === "success") {
						resolve(event.data)
					} else {
						resolve(false)
					}
				});
			});
		},

		// 获取历史记录和奖期
		async getAwardPeriod() {
			let data = await GetResponsesToken('lottery/issue/queryCurIssue/' + (this.type == 'welfareLottery' ? 'FC3D' : 'PL3'))

			if (data.msg === "暂无销售") {
				this.historyMsg = '暂无期次';
				this.canBuy = false
			} else {
				this.currentSell = data.data.issue
				this.currentSell['sellEndTime'] = Number(this.currentSell['sellEndTime'])
				this.history = data.data.list
				this.lotteryLimit = data.data.lotteryLimit
			}
		}
		
	}, 

	mounted() {
		// 获取路径
		this.baseURL = getBaseUrl(weex.config.bundleUrl, true)

		this.getAwardPeriod()
		
		this.shakephone()
	},

	destroyed() {
		sxglobalEvent.removeEventListener("shakephone")
	}
}      
</script>

<style scoped>

.pay-btn {
	width:180px;
	height: 98px;
	line-height: 98px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.pay-btn-color {
	font-family: PingFangSC-Medium;
	font-size: 32px;
	color: #FFFFFF;
}

.bgColor{
   background-color: '#E70D0D ';
   color: '#fff';
}

.history-arrow {
	display: flex;
	width:200px;
	height:70px;
	justify-content: flex-end;
	align-content: flex-start;
	position: relative;
}

.history-list-title-num-arr-hr {
  font-size: 24px;
  margin-left: 6px;
  margin-right: 6px;
}


.history-list-title-num-arr-h-one {
	color: #de000e;
	margin-left: 6px;
	margin-right: 6px;
	font-size: 24px;
	width:30px;
	display: flex;
	justify-content: center;
	align-items: center;
}
.history-list-title-num-arr-h-one-black {
  color: #333333;
  margin-left: 6px;
  margin-right: 6px;
  font-size: 24px;
}
.history-list-title-num-arr-h-two {
  color: #0c50ee;
  margin-top: 0;
  margin-bottom: 0;
  margin-left: 6px;
  margin-right: 6px;
  font-size: 24px;
  margin-left: 6px;
  margin-right: 6px;
}

.game-area-backward {
  padding-top: 38px;
  padding-bottom: 70px;
  padding-left: 31px;
  padding-right: 31px;
}

.history-list {
	display: flex;
    flex-direction: column;
}

.history-list-title {
  flex-direction: row;
  /* padding-top: 18px;
  padding-bottom: 21px; */
  width: 750px;
  padding-left: 30px;
  padding-right: 30px;
  height: 72px;
  border-bottom-width: 1px;
  border-bottom-style: solid;
  border-bottom-color: rgb(232, 229, 229);
  background-color: #ffffff;
  justify-content: space-between;
}


.history-list-title-f {
  font-size: 24px;
  width: 170px;
}
.history-list-title-num-arr {
	display: flex;
	flex-direction: row;
	align-items: center;
    flex: 1;
    justify-content: flex-start;
}


.history-list-title-num-arr {
	display: flex;
	flex-direction: row;
	align-items: center;
    flex: 1;
    justify-content: flex-start;
}


.popup-btn {
	width:200px;
	height: 72px;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-top:12px;
	margin-bottom:12px;
	margin-right:21px;
	margin-left:21px;
}

.popup-btn-j{
   width: 200px;
   height: 72px;
   line-height: 72px;
   display: flex;
   justify-content: center;
   align-items:center;
}
.btn-basis-color {
	background-color: #FFF;
	border-width: 2px;
	border-style: solid;
	border-color: #D1D1D1;
	border-radius: 8px;
}

.btn-basis-color-active  {
	background-color: #E70D0D;
	border-width: 2px;
	border-style: solid;
	border-color: #E70D0D;
	border-radius: 8px;
}

.popup-btn-color {
	font-family: PingFangSC-Medium;
	font-size: 32px;
	text-align: center;
}


.header-con {
	flex:1;
	height: 90px;
	display: flex;
	justify-content: center;
	position: relative;
	align-items: center;
	flex-direction: row;
}

.scroller {
	width: 750px;
	background-color: #f5f5f5;
}
.container {
	background-color: #f5f5f5;
}

/* chose-down */
.chose-down-money {
	font-size: 24px;
	align-self: center;
	font-family: PingFangSC-Medium;
}
.chose-down-money-g {
	flex-direction: row;
	margin-right: 48px;
}

.chose-down-submit {
	flex-direction: row;
	display: flex;

	height: 98px;
}
.chose-down-mechose-img {
	width: 34.5px;
	height: 38.5px;
}
.chose-down-mechose-name {
	font-size: 20px;
	color: #333333;
	margin-top: 10px;
}
.chose-down-mechose {
  justify-content: center;
  align-items: center;
  margin-left:31px;
}
.chose-down {
	width: 750px;
	background-color: #fff;
	flex-direction: row;
	justify-content: space-between;
	height: 98px;
}
/* chose-down */

/* history */
.history-list-items-balls {
	flex-direction: row;
	width:200px;
	display: flex;
	justify-content: flex-start;
}
.history-list-item-date {
  font-size: 24px;
  width: 170px;
}

.history-list-items-item {
	flex-direction: row;
	/* padding-top: 22px;
	padding-bottom: 22px; */
	padding-left: 30px;
	padding-right: 30px;
	background-color: #d8d8d8;
	align-items: center;
	flex: 1;
	justify-content: flex-start;
	width:750px;
	height: 72px;
}


.history-list-title-num-arrow {
  flex-direction: row;
  justify-content: flex-end;
  margin-left:10px;
}
.history-list-title-num-arrow-img {
	width: 28px;
  	height: 17px;
	position: absolute;
	top:28px;
	right:9px;
}

.history-header-arrow {
  width: 45px;
  height: 40px;
}

.history-arrow-red {
	width: 48px;
	height: 48px;
	position: absolute;
	top:11px;
	right:0;
}

.show {
  transform: rotate(-180deg);
}
/* history */
.history-price-time-g {
  flex-direction: row;
  /* padding-top: 18px;
  padding-bottom: 21px; */
  padding-left: 26px;
  border-bottom-width: 1px;
  border-bottom-style: solid;
  border-bottom-color: rgb(232, 229, 229);
  flex-wrap: wrap;
  background-color: #ffffff;
  height:72px;
}
.history-price-time-2 {
  margin-left: 10px;
}
.history-price-time {
  font-size: 24px;
  align-self: center;
}
.history-price-time-fat {
  flex-direction: row;
}

.group-three-pad{
   display: flex;
   flex-direction: column;
   padding-top:32px;
   padding-bottom: 32px;
}

.isSelectOpt{
   height: 256px;
   background-color: #fff;
}

.select-type{
  display: flex;
  flex-direction: row;
  justify-content:space-between;
  flex-wrap: wrap;
  width:750px;
  padding-top:35px;
  padding-bottom:28px;
  padding-right:11px;
  padding-left:11px;
}

.select-layer{
  position: fixed;
  width: 100%;
  height: 100%;
  top:0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: rgba(0,0,0,0.3);
}

.select-type-t{
  width: 200px;
  height: 72px;
  justify-content: center;
  align-items: center;
  border-radius: 8px;
  margin-bottom: 24px;
  border: 2px solid #D1D1D1;
  border-top-width: 2px;
  font-size: 32px;
  color: #333333;
  text-align: center;
}

.slectBtn{
  background-color: #E70D0D;
  color: #fff;
}


.popup-title-c{
  padding-top:45px;
  font-size: 36px;
  color: #333;
  margin-bottom: 48px;
  text-align: center;
}

.popup-select-type{
  padding-right: 37px;
  padding-left: 37px;
  margin-bottom: 90px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.wxc-pop-list{
  display: flex;
  flex-direction: row;
  box-shadow: 0px -5px 10px rgba(229,229,229,0.50);
  position: absolute;
  bottom: 0px;
}

.wxc-pop-btn{
  flex:1;
  width: 375px;
  height: 96px;
  line-height: 96px;
  justify-content: center;
  align-items: center;
  background-color: #FAFAFA;
}

.pop-cancle{
  background-color: #E70D0D;
}

.pop-btn-title{
  font-size: 32px;
  color: #333333;
}

.popup-btn {
    width: 200px;
    height: 72px;
    line-height: 72px;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}

.btn-basis-color {
    background-color: #FFF;
    border-width: 2px;
    border-style: solid;
    border-color: #D1D1D1;
    border-radius: 9px;
    position: relative;
}

.btn-basis-color-active {
    background-color: #fff;
    border-width: 2px;
    border-style: solid;
    border-color: #E70D0D;
    border-radius: 9px;
    position: relative;
}

.popup-btn-color {
	font-size: 32px;
	text-align: center;
}

.pop-btn-confirm{
  font-size: 32px;
  color: #fff;
}

.header-right {
  display: flex;
  justify-content: flex-end;
  flex-direction: row;
  align-items: center;
    width:110px;
  height:80px;
  
}
.header-title {
  font-size: 36px;
  color: #333;
  font-weight: 600;
  display: flex;
  justify-content: center;
  font-family: PingFangSC-Medium;
}
.sanjiao{
	position: absolute;
	bottom: -1px;
	right: -2px;
	width:24.8px;
	height:28px;
}
</style>

